Hotlinking: Bad Internet Etiquette
2025.09.06
Hotlinking is an internet term used to describe the act of displaying an image or video on a website by linking to the original website hosting the image (thank you wikipedia for that). For example, imagine the owner of website A has an epic picture on their website. The owner of website B wants to use that photo on their own website, what should they do?
[Option 1] Link the photo directly from website A
OR
[Option 2] Download the image and host it on website B
If you picked option 1, uh oh, you're now hotlinking. Now everytime time someone visits website B, that image is loaded on the original website (website A), which uses its bandwidth and that costs the hotlinked website money. So the better practice is to host the image on your own server/domain (which you should keep in mind permission to use and credits to the original owner). This also avoids any issues you may encounter if the original website goes down, or the orginal owner changes the image because anything they do to it, is done to your website since its linked directly to the original website.
When I started this neocities website, I had no clue what I was doing and I had been unintentionally hotlinking all my images. The tutorial webpage layout I had been using had the html looking something like this:
< img src= "a url link here" alt= "description of image" style= "width: 0px; height: 0px;" >
I would open up an image I found in a new tab and copy that url to put in < img src= > and the image would show up on my webpage. And that was working great, I had created most of my webpages and added a shit ton of graphics, website was looking fire. But then I noticed a lot of the websites I was visiting had a small message that said "please don't hotlink" or "host images on own server if using" and more along the lines of that. I didn't know what that meant so I did a little digging and found out I had been hotlinking from some of my favorite sites. My bad. I didn't understand how I was supposed to use the images without the website url link. I had tried downloading the images to my laptop but then I couldn't figure out how to get a url link from those images. So, I turned to reddit and the posts I read said they use imgur or a website service used for hotlinking (at this point, I'm having a hard time searching for a solution because I am poorly describing the problem to google lol). I figure I can just use tumblr to host all the images I want, and thus began the journey of posting all the images to Tumblr and replacing all the url links I had across all the webpages.
I thought that was the end of that, however, I started to read more online and I still felt iffy about hotlinking from Tumblr because they could shut it down at any moment. So what was the solution?
HTML File Paths.
Once I actually started to look into HTML (thank god for w3schools, they have so much information), and at the neocities website, I realized all I needed to do was upload the image to a folder on neocities and create a file path to that image.
So I had to make each individual folder and put each webpage and their corresponding images within their folder (images that showed up across multiple webpages were placed in a separate folder for easier organization).
Then when I was filling it in, you can see for line 41, < img src= > I put /directory (in this case, the Item of the Month folder title) and then the title of the actual image (/item.img) and that was basically it.
I'm sure there is a way better way to organize and do this, but I found this works for me and my novice skills. So moral of the story, I accidently hotlinked, but then fixed my mistakes by hosting the images on my own server.
